<template>
    <div>
        <div class="head-project">
            <div class="title"><span>配置</span></div>
            <div style="padding-top:14px">
                <Poptip trigger="hover" title="Title" content="content">
                    <Icon type="ios-help-outline" size="16" color="#2d8cf0" style="font-weight: 800;"></Icon>
                </Poptip>
            </div>
        </div>
        <div class="db-list">
            <div>
                数据库
            </div>
            <div class="db-title">
                <div>{{dataSourceName}}</div>
                <Button @click="syncDB">同步</Button>
                <Button>激活CRUD API</Button>
                <Button>停止CRUD API</Button>
            </div>
            <Table :data="dataList" :columns="tableColumns" highlight-row stripe></Table>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
          return {
              dataSourceId: '',
              dataSourceName: '',
              dataList:[],
              param : {
                  orders: [
                      {
                          fieldName: 'name',
                          orderType: 'ASC'
                      }
                  ],
                  pageParms: {
                      pageIndex: 0,
                      pageSize: 10000,
                  }
              },
              tableColumns: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: '表名',
                      key: 'name'
                  },
                  {
                      title: '实体(PO)名',
                      key: 'className'
                  },
                  {
                      title: '注释',
                      key: 'comments'
                  },
                  {
                      title: 'CRUD API',
                      render: (h, params) => {
                          if (params.row.isAutoCrud == '0') {
                              return h('span',{},'否');
                          } else {
                              return h('span',{},'是');
                          }
                      }
                  }
              ],
          };
        },
        props:{
          id:{
              type: String
          }
        },
        created(){
        },
        methods:{
            initPorject(project){
              this.$http.post('/codegen/api/v1/datasources/tableNames', project.datasources[0]).then((res)=>{
                  if (res.status === 200) {
                  }
              });
            },
            initDb(){
                this.$http.get('/codegen/api/v1/projects/' + this.id + '/show').then((response) => {
                    if (response.data.project) {
                        let dbList = response.data.project.datasources;
                        this.dataSourceId = dbList[0].id;
                        this.dataSourceName = dbList[0].name;

                        this.$http.post('/codegen/api/v1/datasources/' + this.dataSourceId + '/tables',this.param).then((response) => {
                            this.dataList = response.data.data;
                        });
                    }
                });
            },
            //同步数据库
            syncDB() {
                this.$http.get('/codegen/api/v1/datasources/' + this.dataSourceId + '/tables/sync').then((response) => {
                    if (response.data.statusCode == '200') {
                        this.$http.post('/codegen/api/v1/datasources/' + this.dataSourceId + '/tables',this.param).then((response) => {
                            this.dataList = response.data.data;
                            this.$Message.success('同步成功');
                        });
                    }
                });
            },
        }
    };
</script>

<style scoped lang="scss">
    .head-project {
        display: flex;
        justify-content: space-between;
        .title {
            width: 120px;
            padding: 6px 0;
            border-bottom: 1px solid #2d8cf0;
            span {
                font-size: 18px;
                font-weight: bold;
            }
        }
        border-bottom: 1px solid #e9eaec;
        margin: 16px 0;
    }
    .db-list{

        &>div{
            margin-bottom: 16px;
        }

        .db-title{
            display: flex;
            align-items: center;

            button{
                width: 120px;
            }

            &>div,button{
                margin-right: 12px;
            }
        }
    }
</style>